import React, { Component } from 'react';
import Button from './Button'
import Count from './Count'
import styled from 'styled-components'

const CountWrapper = styled.div`
  h1 {
    display:block;
    color:red;
  }

  button {
    width:100px;
    height:40px;
    background:blue;
    color:white;
    font-size:20px;
  }
`

class Counter extends Component {

  constructor() {
    super();
    this.state = {
      count: 0
    }
  }

  handleChange(type) {
    console.log('handle change')
    this.setState((preState, props) => {
      if (type === 'increment') {
        return {
          count: preState.count + 1
        }
      } else {
        return {
          count: preState.count - 1
        }
      }

    }, () => { })
  }

  render() {
    return (
      <CountWrapper >
        <Button change={() => this.handleChange('decrement')}>-</Button>
        <Count count={this.state.count}></Count>
        <Button change={() => this.handleChange('increment')}>+</Button>
      </CountWrapper>
    );
  }
}

export default Counter;